@import '/src/assets/style/common.less';

.radio-host {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;

  &__category {
    margin: 0 auto;
    margin-top: 40px;
    overflow: hidden;
    position: relative;
    width: 720px;

    &-wrapper {
      display: flex;
      justify-content: space-between;
      transition: transform ease-in-out 0.3s;
    }

    &-item {
      align-items: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      margin-right: 40px;
      width: 50px;
    }

    &-img {
      height: 36px;
      width: 36px;

      &-wrapper {
        align-items: center;
        background-color: #fef6f5;
        border-radius: 50%;
        display: flex;
        height: 50px;
        justify-content: center;
        width: 100%;

        &:hover {
          background-color: #fdeeed;
        }
      }
    }

    &-text {
      margin-top: 10px;
      text-align: center;
      white-space: nowrap;
      width: 100%;
    }

    &-arrow {
      color: #d7d7d7;
      cursor: pointer;
      font-size: 26px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;

      &.--left {
        left: -5px;
      }

      &.--right {
        right: -5px;
      }

      &:hover {
        color: #c1c1c1;
      }
    }
  }

  &__list {
    margin-left: 10px;
    padding-right: 20px;
    width: 200px;

    h2 {
      font-size: 16px;
      margin-bottom: 20px;
    }

    h3 {
      color: var(--primary-color);
      font-size: 16px;
      margin-bottom: 0;
      margin-top: 20px;
    }

    h4 {
      color: #bfbfbf;
      font-size: 14px;
      font-weight: normal;
      line-height: 1;
      .ellipsis();
    }
  }
}
